<template>
  <div>
    <div class="header">
      <slot></slot>
      
      <van-icon class="icon-two" name="share-o" @click="showShare = true" />
     <van-share-sheet
        v-model="showShare"
        title="快分享给你的好友吧！"
        @select="onSelect(options)"
        :options="options"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "VantDebackindex",

  data() {
    return {
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
    }
  },

  mounted() {},

  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
  props: {
    conn: {
      type: Object,
    },

  },
};
</script>

<style scoped>
h5 {
  font-size: .533333rem;
  font-weight: 600;
}
.header {
  width: 100%;
  height: 45px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* align-content: center; */
}

.h1 {
  width: 80%;
  text-align: center;
}
.icon-two {
  width: 7%;
   font-size: .533333rem;
  margin-right: 0.133333rem;
}
</style>